<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-input v-model="username" placeholder="用户账号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="message" placeholder="日志"></el-input>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-date-picker
							v-model="operateStart"
							type="datetime"
							value-format="yyyy-MM-dd HH:mm:ss"
							placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker
							v-model="operateEnd"
							type="datetime"
							value-format="yyyy-MM-dd HH:mm:ss"
							placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers(pageSize)">查询</el-button>
				</el-form-item>
				<!--<el-form-item>-->
					<!--<el-button type="primary" >重置</el-button>-->
				<!--</el-form-item>-->
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;" :default-sort = "{prop: 'time'}">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="username" label="账号" width="200">
			</el-table-column>
			<el-table-column prop="time" label="操作时间" width="200" sortable>
			</el-table-column>
			<el-table-column prop="ip" label="IP" width="250">
			</el-table-column>
			<el-table-column prop="resultTxt" label="结果" width="200">
			</el-table-column>
			<el-table-column prop="message" label="内容" min-width="200">
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="sizes, total, prev, pager, next" :page-sizes="[15, 30, 50]" @current-change="handleCurrentChange" @size-change="handleSizeChange"  :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>

<script>
	export default {
		data() {
			return {
			    username:'',
				message:'',
				operateStart:'',
				operateEnd:'',
				users: [],
				total: 0,
				page: 1,
				pageSize:15,
				listLoading: false,
			}
		},
		methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.getUsers(this.pageSize);
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers(this.pageSize);
			},
			//获取用户列表
			getUsers(page) {
				this.listLoading = true;
				let loginStart,loginEnd
                if (this.operateStart || this.operateEnd){
                    loginStart = Date.parse(new Date(this.operateStart))
                    loginEnd = Date.parse(new Date(this.operateEnd))
                }else{
                    loginStart = ''
                    loginEnd =''
                }
				this.$axios.get('/operation-records?index='+this.page+'&size='+page+'&username='+this.username+'&message='+this.message+'&logatstart='+loginStart+'&logatend='+loginEnd,{},this.global().token).then((res)=>{
				    if (res.status == 200){
				        this.total = res.data.count
						let user = res.data.data
						user.forEach((val)=>{
                            val.time = this.changeDate(val.logAt)
							if (val.result){
                                val.resultTxt = '成功'
							}else{
                                val.resultTxt = '失败'
							}
						})
						this.users = user
                        this.listLoading = false;
					}
				})
			},
		},
		mounted() {
		    this.operateStart = this.Todate1(new Date(new Date()-24*60*60*1000),'yyyy-MM-dd HH:mm:ss')
            this.operateEnd =  this.Todate(new Date(new Date()),'yyyy-MM-dd HH:mm:ss')
			this.getUsers(this.pageSize);
		}
	}

</script>

<style scoped>

</style>